<template>
	<view class="cart">
		<view class="cart_warp" v-if="cart.length > 0">
			<view class="my-cell" @click="goHome">
				<view class="title">购物满99包邮</view>
				<view class="info">再逛逛</view>
				<view class="icon"><text class="iconfont icon-ziyuan3"></text></view>
			</view>

			<view class="goods-wrap">
				<view v-for="item in cart" class="cartItem" :key="item.productId">
					<view class="cart-one-item">
						<checkbox-group class="check">
							<label><checkbox value="cb" :checked="item.selected" @click="checkOne(item.productId)" /></label>
						</checkbox-group>

						<view class="left"><image :src="item.image" /></view>
						<view class="right">
							<view class="goods_info">
								<view class="title">{{ item.title }}</view>
								<view class="desc"></view>
								<view>
									<text class="price">
										￥
										<text class="price-number">{{ item.price }}</text>
									</text>
								</view>
							</view>
							<view class="cart-btn"><my-input-number :idid="item.productId" :count="item.quantity" @changeNumberEvent="getOperator"></my-input-number></view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="cart_empty" v-if="cart.length === 0">
			<view>
				<view class="tubiao mb2"><text class="iconfont icon-gouwuche"></text></view>
				<text>购物车为空</text>
			</view>
		</view>

		<view class="cart-footer" v-show="cart.length > 0">
			<view class="quanxuan">
				<checkbox-group class="check">
					<label>
						<checkbox value="cb" :checked="allSelsect" @click="checkAll" />
						全选
					</label>
				</checkbox-group>
			</view>
			<view class="heji">
				合计：
				<text>￥{{ (this.allMoney / 1).toFixed(2) }}</text>
			</view>
			<button class="toOrderForm" @click="toOrderForm" :disabled="checkedNum === 0">去结算</button>
		</view>

		<my-navbar></my-navbar>
	</view>
</template>

<script>
import myNavbar from '@/components/my-navbar/my-navbar.vue';
import myInputNumber from '@/components/my-input-number/my-input-number.vue';

import uniList from '@/components/uni-list/uni-list.vue';
import uniListItem from '@/components/uni-list-item/uni-list-item.vue';

import { mapState, mapMutations, mapActions, mapGetters } from 'vuex';

export default {
	components: { myNavbar, myInputNumber, uniList, uniListItem },
	data() {
		return {};
	},
	computed: {
		...mapState(['cart', 'allSelsect']),
		...mapGetters(['allMoney']),

		counter_current() {
			// let that = this;

			return function(id) {
				let result = 0;
				this.cart.some(good => {
					if (good.productId === id) {
						result = good.quantity;
					}
				});

				//   console.log(result);
				return result;
			};
		},
		checkedNum() {
			let i = 0;
			this.cart.forEach((item, index) => {
				if (item.selected === true) {
					i++;
				}
			});
			return i;
		}
	},
	methods: {
		goHome() {
			uni.redirectTo({
				url: '../home/home'
			});
		},

		...mapMutations(['SELECT', 'SELECTALL']),

		// 选择一项
		checkOne(id) {
			this.$store.commit('SELECT', id);
		},
		// 全选和反选
		checkAll() {
			this.$store.commit('SELECTALL');
		},

		getOperator(op, id) {
			// console.log(this.counter(id));

			if (op === 'plus') {
				//this.addNum(id);
				this.$store.commit('ADDNUM', id);
			} else {
				if (this.counter_current(id) === 1) {
					//this.$store.commit('DELGOODS', id);
					this.confirmDelete(id);
				} else {
					//this.jianNum(id);
					this.$store.commit('REDUCENUM', id);
				}
			}
		},
		confirmDelete(id) {
			let that = this;

			uni.showModal({
				title: '删除确认',
				content: '你确定删除该商品么？',
				success: function(res) {
					if (res.confirm) {
						that.$store.commit('DELGOODS', id);
					} else if (res.cancel) {
						//console.log('用户点击取消');
					}
				}
			});
		},

		// 去下单
		toOrderForm() {
			uni.navigateTo({
				url: './checkout'
			});
		}
	}
};
</script>

<style lang="scss">
.cart {
	height: 100%;
}

.cart-one-item {
	height: 150px;
	width: 100%;
	background-color: #fff;
	border-bottom: 1px solid #eee;
	display: flex;

	.check {
		display: flex;
		align-items: center;
		padding: 20rpx;
	}

	.left {
		width: 180rpx;
		height: 100%;
		display: flex;
		align-items: center;
	}

	.left > image {
		width: 160rpx;
		height: 160rpx;
	}

	.right {
		flex: 1;
		box-sizing: border-box;
		position: relative;
		height: 100%;
		padding-left: 10px;
		.goods_info {
			padding-right: 30rpx;
			position: absolute;
			line-height: 1.5;
			top: 50%;
			transform: translateY(-50%);
			.title {
			}
			.price {
				color: $colorAccent;
				.price-number {
					font-size: 18px;
					font-weight: 600;
				}
			}
		}

		.cart-btn {
			position: absolute;
			bottom: 15px;
			right: 15px;
		}
	}
}

.cart-footer {
	display: flex;
	position: fixed;
	width: 100%;
	bottom: 60px;
	border-top: 1px solid #eee;
	background-color: white;
	.quanxuan {
		width: 140rpx;
		display: flex;
		align-items: center;
		padding-left: 20rpx;
	}
	.heji {
		flex: 1;

		display: flex;
		align-items: center;
		justify-content: flex-end;

		padding-right: 20rpx;

		text {
			font-size: 16px;
			color: $colorAccent;
			font-weight: bold;
		}
	}
	.toOrderForm {
		width: 180rpx;
		background-color: $colorPrimary;
		border: 0;
		font-size: 13px;
		padding: 5px 0px;
		color: white;
		border-radius: 0;
	}
}

.goods-wrap {
	padding-bottom: 120px;
}
.cart_warp {
	margin-bottom: 120px;
}

.cart_empty {
	height: 100%;
	display: flex;
	flex-flow: column;
	justify-content: center; /* 水平居中 */
	align-items: center; /* 垂直居中 */
	.iconfont {
		font-size: 50px;
		color: gray;
	}
	text {
		color: gray;
	}
	.tubiao {
		text-align: center;
	}
}
</style>
